<template>
  <div class="container">
    <div class="header">
      <div class="left" @click="goBack">
        <van-icon name="arrow-left" size=".16rem" color="#fff"/>
      </div>
      <div class="center">商家详情</div>
      <div class="right">
        <!-- <img :src="../../assets/images/collect3.png" alt @click="collectMethod"> -->
         <img :src="collectIcon" alt @click="collectMethod">
        <img src="../../assets/images/share.png" alt @click="shareMethod">
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <div class="video" @click="playMethod">
        <video width="100%" height="100%" preload="auto" ref="myVideo" @ended="endedMethod">
          <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">您的浏览器不支持Video标签
        </video>
        <div class="pic" v-if="isShowPlay">
          <img src="../assets/images/play.png" alt>
        </div>
      </div> -->
      <div class="banner"><img :src="initData.logoUrl" alt=""></div>
      <div class="detail">
        <div class="title">
          <div class="name">{{initData.name}}</div>
          <div class="num">
            <van-rate v-model="value" color="#01bf47" :size="22" readonly void-color="#cccccc"/>
          </div>
        </div>
        <div class="subtitle">{{initData.keyValue}}</div>
        <div class="adress">
          <div class="left">
          <img src="../../assets/images/adress2.png" alt>
          <span>{{initData.address}}</span>
          </div>
          <div class='right'>
            <a :href="'tel:'+initData.phone">
            <img src="../../assets/images/phone.png" alt="">
            <span>拨打</span>
            </a>
          </div>
        </div>
        <div class="introduce">
          <div class="wrap">
          <div class="left">{{initData.description||"暂无介绍"}}</div>
          <div class="right">商家介绍</div>
          </div>
        </div>
        <!-- <div class="action">
        <div class="left">
          已评价
          <span>500条</span>
        </div>
        <div class="right">
          <span>查看评价</span>
          <van-icon name="arrow"/>
        </div>
        </div>-->
      </div>
      <div class="tab">
        <div class="list" v-if="initList.list&&initList.list.length>0">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
            <ul>
              <li
                v-for="(item,index) in initList.list"
                :key="index"
                @click="toGoodsDetail(item.catering_Id)"
              >
                <div class="left">
                  <img :src="item.product_image_url" alt="">
                </div>
               <div class="center">
                 <div class="title">{{item.product_name}}</div>
                 <div class="subtitle">{{item.introduction}}</div>
                 <div class="price">￥{{item.price}}/{{item.product_detail_group_name}}</div>
               </div>
               <div class="right">
                 <div></div>
                 <!-- <div class="addShoppingCar" @click.stop="showPop('add',item.catering_Id)">
                   <img src="../../assets/images/shoppingCar.png" alt="">
                   <span>加入</span>
                 </div> -->
                 <div class="buy" >抢购</div>
               </div>
              </li>
            </ul>
          </van-list>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </van-pull-refresh>

    <van-popup v-model="show"  position="bottom">
      <div class="popContent">
        <div class="date" @click="showDatePop">
          <div class="left">使用日期</div>
          <div class="center">{{formData.selectDate}}</div>
          <div class="right"><van-icon name="arrow" /></div>
        </div>
        <div class="selectNum">
          <div class="left">选择数量</div>
          <div class="right">
            <img src="../../assets/images/reduce2.png" alt="" @click="reduceNum">
            <span>{{formData.goodsNum}}</span>
            <img src="../../assets/images/add2.png" alt="" @click="addNum">
          </div>
        </div>
        <div class="btn" v-if="buyType=='add'" @click="addShoppingCarMethod">加入购物车</div>
        <div class="btn" v-if="buyType=='buy'" @click="payMethod">去支付</div>
      </div>
    </van-popup>
    <van-popup v-model="showTime"  position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          @cancel="cancelMethod"
          @confirm="confirmMethod"
      />
    </van-popup>


  </div>
</template>

<script>
export default {
  name: "restaurantDetail",
  data() {
    return {
      //显示评分分数
      value: 0,
      //是否显示视频播放按钮
      isShowPlay: true,
      initData: {},
      initList: {},
      initList_li: [],
      isLoading: false,
      loading: false,
      finished: false,
      pageNum:1,
      user_id:'10426',
      shareShow:false,
      show:false,
      showTime:false,
      currentDate: new Date(),
      buyType:'',
      formData:{
          selectDate:"请选择日期",
          goodsNum:1,
          catering_Id:'',
      },
      shopingCarData:[],
      collectIcon:require('../../assets/images/collect3.png'),
    };
  },
  components: {
   // share
  },
  mounted() {
    if(localStorage.getItem('shoppingCarData')){
      this.shopingCarData=localStorage.getItem('shoppingCarData');
    };
    if(this.$cookies.get('user_id')&&this.$cookies.get('user_id')!=null){
         this.user_id=this.$cookies.get('user_id');
    }else if(localStorage.getItem('user_id')&&localStorage.getItem('user_id')!=null){
      this.user_id=localStorage.getItem('user_id');
    };
    // if (this.$refs.myVideo.ended) {
    //   this.isShowPlay = true;
    // }
    this.getInitData();
    this.getInitList();   
  },
  methods: {
    //拨打电话
    callPhone(){
       let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let params={
          phoneNum:this.initData.phone,
      };
      if (isAndroid) {
         console.warn("callPhone:"+JSON.stringify(params));
      } else if (isiOS) {
         window.webkit.messageHandlers.callPhoneMethod.postMessage(params);
      }
    },
    //加入购物车
    addShoppingCarMethod(){
      if(this.formData.selectDate=="请选择日期"){
        this.$toast('请选择使用日期');
        return false;
      };
      this.shopingCarData.push(this.formData);
      localStorage.setItem('shoppingCarData',this.shopingCarData);
      this.$toast('加入购物车成功');
      this.show=false;
    },
    //支付
    async payMethod(){
      if(this.formData.selectDate=="请选择日期"){
        this.$toast('请选择使用日期');
        return false;
      };

      

       let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // let params={
      //     shop_id: this.$route.query.shopId,
      //     catering_Id: this.formData.catering_Id,
      //     user_id: this.user_id,
      // };
      if (isAndroid) {
        
      } else if (isiOS) {
         window.webkit.messageHandlers.toPayMethod.postMessage(this.formData);
      }
    },
    //加数字
    addNum(){
      this.formData.goodsNum++;
    },
    //减数字
     reduceNum(){
       if(this.formData.goodsNum>1){
          this.formData.goodsNum--;
       };
    },
    //时间选择器点确定
    confirmMethod(){
      this.formData.selectDate=this.$vuefilter.formatDate(this.currentDate,'yyyy-MM-dd');
      this.showTime=false;
    },
    //关闭时间弹窗
    cancelMethod(){
      this.showTime=false;
    },
    //显示时间弹窗
    showDatePop(){
      this.showTime=true;
    },
    //显示支付弹窗
    showPop(type,catering_Id){
      this.show=true;
      this.buyType=type;
      this.formData.catering_Id=catering_Id;
    },
    //分享
    shareLink(){
      this.shareShow= true;
    },
    dle(){
      this.shareShow= false;
    },
    goBack() {
      this.$router.back();
      // this.$router.push('/');
      // window.history.back();
      // history.go(-1);

    },
    //点击视频，播放/暂停
    playMethod() {
      if (this.$refs.myVideo.paused) {
        this.isShowPlay = false;
        this.$refs.myVideo.play();
      } else {
        this.isShowPlay = true;
        this.$refs.myVideo.pause();
      }
    },
    //判断视频是否播放完成
    endedMethod() {
      this.isShowPlay = true;
    },
    //下拉刷新
    onRefresh() {

      this.initList_li=[];
      this.getInitData();
      this.getInitList();
    },
    //上拉加载
    onLoad() {
      if(this.initList.list&&this.initList.list.length>0){
        this.getInitList();
      };
    },
    //初始化页面
    async getInitData() {
      let params = {
        shop_Id: this.$route.query.shopId
      };
      const res = await this.$axios.post(this.$api.queryShopInfo, params);
      if (res.success) {
        this.initData = res.data;
        this.value = parseInt(this.initData.rating / 2);
        this.isLoading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
    //初始化页面列表
    async getInitList() {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
      let params = {
        pageSize: 10,
        pageNum:this.pageNum,
        shop_Id: this.$route.query.shopId
      };
      const res = await this.$axios.post(this.$api.businessDetails, params);
      if (res.success) {
        if(this.loading){
          this.initList_li=this.initList_li.concat(res.data.list);
          this.initList=res.data;
          this.initList.list=this.initList_li;
          // alert(this.initList.list.length);
          if(this.initList.list.length>=this.initList.total){
            this.finished=true;
          }else{
            this.pageNum++;
          };
          // alert(this.finished);
        }else{
           this.initList = res.data;
           if(this.initList.list.length>=this.initList.total){
            this.finished=true;
          };
        };
        this.isLoading = false;
        this.loading = false;

      } else {
        this.initList = {};
        this.$toast(res.msg);
      }
    },
    //收藏
   async collectMethod(){
      let params = {
        user_id:this.user_id,
        shop_id: this.$route.query.shopId,
        language:'zh'
      };
      const res = await this.$axios.post(this.$api.shopCollect, params);
      if (res.success) {
       this.$toast(res.msg);
       if(res.msg=="收藏成功"){
           this.collectIcon=require('../../assets/images/collect4.png');
       }else{
          this.collectIcon=require('../../assets/images/collect3.png');
       };
     
      } else {
        this.$toast(res.msg);
        
      }
    },
    //跳转详情页
    toGoodsDetail(catering_Id) {
      this.$router.push({
        path: "./goodsDetail",
        query: {
          catering_Id: catering_Id,
          shopId: this.$route.query.shopId
        }
      });
    },

    shareMethod(){
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let params={
        url:window.location.href
      };
      if (isAndroid) {
        // window.WebViewJavascriptBridge.callHandler("AndroisVipFun",params,function() {});
      } else if (isiOS) {
        // this.$JsBridge.call('toPayMethod',params,function(response){
        //     alert(response);
        // });
         window.webkit.messageHandlers.toShare.postMessage(params);
      }
    },
    shareMethodBack(message){
      this.$toast(message);
    },

  }
};
</script>

<style scoped>
.empty{
  width:100%;
  margin-top:.4rem;
  text-align: center;
  font-size:.16rem;
  color:#999999;
}
.popContent{
  height:2.5rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.popContent .date{
  width:80%;
  height:.5rem;
  background:#f2f2f2;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding:0 .15rem;
  border-radius: .05rem;
}
.popContent .selectNum{
  width:80%;
  height:.5rem;
  background:#f2f2f2;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding:0 .15rem;
  border-radius: .05rem;
}
.popContent .selectNum .right {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.popContent .selectNum .right img {
  width:.18rem;
}
.popContent .selectNum .right span {
  padding:0 .2rem;
}
.popContent .btn {
  width:80%;
  height:.5rem;
  border-radius: .5rem;
  background:#00bf46;
  color:#fff;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.introduce{
  padding:0 .15rem;
  width:100%;
}
.introduce .wrap{
  width:100%;
  border-top:1px solid #f2f2f2;
  padding:.1rem 0;
   display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  font-size:.14rem;
  color:#333333;

}
.introduce .wrap .right{
  color:#00bf47;
  border-left:1px solid #e6e6e6;
  padding-left:.2rem;
}
.container{
  padding-top:.44rem;
}
.banner{
  width:100%;
}
.banner img {
  width:100%;
}
.video {
  width: 100%;
  /* height: 2.25rem; */
  position: relative;
}
.video .pic {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.video .pic img {
  width: 100%;
  height: 100%;
}
.header {
  position: fixed;
  width: 100%;
  height: 0.44rem;
  left: 0;
  top: 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  z-index: 100;
}
.header .left{
  width:30%;
}
.header .right{
  width:30%;
   display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.header .right img {
  width: 0.18rem;
  margin-left: 0.16rem;
}
.header .center{
  width:40%;
  color:#fff;
  text-align: center;
}
.detail {
  width: 100%;
  padding: 0.15rem 0 0;
  background: #fff;
}
.detail .title {
  padding: 0 0.15rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.detail .action {
  width: 100%;
  height: 0.4rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eeeeee;
  padding: 0 0.15rem;
}
.detail .action .left {
  font-size: 0.14rem;
  color: #f44736;
}
.detail .action .right {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 0.14rem;
  color: #808080;
}
.detail .action .right span {
  padding-right: 0.12rem;
}
.detail .title .name {
  font-size: 0.16rem;
  color: #010101;
}
.detail .title .num {
  font-size: 0.15rem;
  color: #333333;
  min-width:1.3rem;
}
.detail .title .num span {
  color: #f44736;
}
.detail .subtitle {
  font-size: 0.14rem;
  color: #808080;
  margin-top: 0.12rem;
  padding: 0 0.15rem;
}
.detail .adress {
  padding: 0 0.15rem;
  font-size: 0.12rem;
  color: #01bf47;
  margin-top: 0.1rem;
  padding-bottom: 0.16rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.detail .adress .right {
  min-width:.6rem;
  height:.25rem;
  border:1px solid #01bf47;
  border-radius: 3px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.detail .adress .right a{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  color:#01bf47;
}
.detail .adress img {
  width: 0.12rem;
}
.detail .adress span {
  padding-left: 0.06rem;
}
/* .list {
  padding: 0 0.15rem 0.2rem;
} */
.list li {
  background: #fff;
  padding: .15rem 0.15rem;
  margin-top: 0.08rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.list li .left{
  width:1.05rem;
}
.list li .left img {
  width:100%;
}
.list li .center{
  padding-left:.12rem;
}
.list li .center .title {
  font-size:.15rem;
  color:#333333;
}
.list li .center .subtitle {
  font-size:.12rem;
  color:#8c8c8c;
  width:1.36rem;
  margin-top:.06rem;
}
.list li .center .price{
  margin-top:.2rem;
  font-size:.15rem;
  color:#f44736;
}
.list li .right {
display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: column;
  height:100%;
  min-height:.88rem;
}
.list li .right .addShoppingCar{
width:.42rem;
height:.42rem;
border-radius: 50%;
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4);
display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size:.12rem;
  color:#00bf47;
}
.list li .right .addShoppingCar img {
  width:.18rem;
}
.list li .right .buy{
  width:.7rem;
  height:.3rem;
  background:#00bf47;
  color:#fff;
  border-radius: .05rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  line-height:.3rem;
}
</style>



<style>
.van-tab--active {
  color: #01bf47;
}
.van-search .van-cell {
  border-radius: 50px;
  background: #e8e8e8;
}
</style>
